{% load static %}

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>login</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
#head {
	height: 120px;
	width: 100%;
	background: linear-gradient(to right,white ,gold,blue);
	text-align: center;
	position: absolute;
    top: 0;
}
#main {
	height:auto;
	width: 100%;
	background-image: url({% static "media/login2.jpg" %});
	background-repeat: no-repeat;
	background-position: center center;
    background-size: 100% 100%;
	position: absolute;
	top: 120px;
    bottom: 80px;

}
#foot {
    height: 80px;
	width: 100%;
	background-color: #CC9933;
    text-align: center;
    position: absolute;
    bottom: 0;
}
.logGet {
    height: 300px;
	width:300px;
    position: absolute;
    top: 5%;
    bottom: 5%;
    right:38%;
	background-color: rgba(255, 255, 255, 0.3);
}

.p1 {
	display: inline-block;
	font-size: 28px;
	margin-top: 30px;
	width: 86%;
}
.logDtip {
	width: 86%;
	border-bottom: 1px solid #ee7700;
	margin-bottom: 60px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}

.title{
	font-family: "宋体";
	color:black;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 36px;
	height: 40px;
	width: 30%;
	font-weight: bold;
}
	
.title1{
		text-shadow: 5px 5px 5px #FF0000;
	}

</style>

<link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
 
<body>


<div class="header" id="head">
  <div class="title"><p class="title1">学生信息管理系统</p>
  <a href=""><span style="font-size: 20px; position:absolute; right:-400px; top:-35px; text-decoration: underline; color:yellow;" >关于我们</span></a>
  <a href=""><span style="font-size: 20px; position:absolute; right:-300px; top:-35px; text-decoration:underline; color:yellow;">帮助中心</span></a>
  </div>
	
</div>
	

<div class="main" id="main">

    <div class="container">
        <div class="logGet"  >
          <form class='form-login' action="/login/" method="post">
              {% if message %}
                  <p class="alert alert-warning" aligh="center">{{ message }}</p>
              {% endif %}
              {% csrf_token %}
              <div class="logDtip">

				<p class="p1" align="center"><span>欢迎登录</span></p>
              </div>
              <div class="form-group">
                  {{ login_form.username.label_tag }}
                  {{ login_form.username}}
              </div>
              <div class="form-group">
                  {{ login_form.password.label_tag }}
                  {{ login_form.password }}
              </div>
              <div class="form-group">
                  {{ login_form.captcha.errors }}
                  {{ login_form.captcha.label_tag }}
                  {{ login_form.captcha }}
              </div>
              <button class="btn btn-default pull-left" onclick="window.location.href='/register/' ">注册</button>
              <button type="submit" class="btn btn-primary pull-right">登录</button>
          </form>
        </div>
    </div> <!-- /container -->

</div>





<div class="footer" id="foot" >

    <div align="center">
	  <i class="icon2"></i><span>联系电话：13178930655</span>
	</div>
    <div align="center">
		<i class="icon"></i><span>联系邮箱：313464187@qq.com</span>
	</div>

	<div align="center">
		<i class="icon1"></i><span>联系地址：海南海口市龙桥学校信息中心</span>
	</div>

  </div>

</body>
</html>